<script setup>
import {UserAddLine} from '@/assets/icons'
import {ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import api from "@/api";
import {ElMessage} from "element-plus";
import tool from "@/utils/tool";

const prop = defineProps({
	size: Number,
	select: Array,
	none: Boolean, // 隐藏选择
	empAddFlag: Boolean
})

const userIcon = UserAddLine
const input = ref('')

const dialogVisible = ref(false)
const selectList = ref([])

const userInfo = ref({})
userInfo.value = tool.data.get("USER_INFO");

const orgParentNoArray = userInfo.value.orgParentNoArray

const showDialog = () => {
	dialogVisible.value = true
	if(prop.select){
		selectList.value = JSON.parse(JSON.stringify( prop.select))
	}
	orgClick({orgNo:userInfo.value.orgNo})
	console.log(userInfo.value)
}
const treeProps = {
	value: 'id',
	label: 'orgName',
	children: 'children',
}

const data = ref(null)
getOrgTree()

function getOrgTree() {
	api.uum.comAndOrgTreeResponse.get().then(res => {
		data.value = res.data
	})
}

const orgUserList = ref([])
const tree2 = ref()


/**
 * 点击组织
 * @param data 组织
 */
const orgClick = (data) => {

	console.log(prop.empAddFlag)
	let orgUrl = ''
	if (prop.empAddFlag) {
		orgUrl = api.uum.getJjUsersAndSelfByOrgNo
	} else {
		orgUrl = api.uum.getJjUsersByOrgNo
	}
	// 获取组织用户
	orgUrl.get({orgNo: data.orgNo, name: name || ''}).then(res => {
		orgUserList.value = res.data
		// 回显已选的 ✓ 号
		selectList.value.map(selectUser => {
			orgUserList.value.map(user => {
				if (selectUser.id === user.id) {
					user.select = true
					selectUser = user
				}
			})

		})
	})
}

const orgUserClick = (user) => {

	// 切换部门后 user内存栈中的地址已变更，变更重新从列表中赋值对象地址（后续变更user选择状态）
	orgUserList.value.map(o_user =>{
		if(user.id === o_user.id) {
			user = o_user
		}
	})
	console.log(user)
	// 变更为未选
	if (user.select) {
		let index = null
		// 切换部门后 user内存栈中的地址已变更，获取已选择列表中的下标
		selectList.value.map((s_user,s_index) =>{
			if(user.id === s_user.id) {
				index = s_index
			}
		})
		// 如果未切换部门
		if(index === null){
			index = selectList.value.indexOf(user)
		}
		selectList.value.splice(index, 1)
		user.select = false
	} else {
		if(prop.size === 0 && selectList.value.length === 1){
			ElMessage({
				message: '只能选择一人！',
				type: 'warning',
			})
			return
		}
		// 选择
		selectList.value.push(user)
		user.select = true
	}
}

const emit = defineEmits(['submit'])

/**
 * 提交
 */
const onSubmit = () => {
	dialogVisible.value = false
	emit('submit', JSON.parse(JSON.stringify(selectList.value)))
	selectList.value = []
	orgUserList.value = []

}

/**
* 取消
*/
const onClean = ()=>{
	dialogVisible.value = false
	selectList.value = []
	orgUserList.value = []
}


defineExpose({
	showDialog
})

</script>

<template>
	<div class="add-user-icon"  @click="showDialog" v-if="!none">
		<el-icon size="18">
			<component :is="userIcon"/>
		</el-icon>
	</div>
	<el-dialog v-model="dialogVisible" width="60%">
		<div class="popover-body">
			<div>
				<el-tabs class="demo-tabs">
					<el-tab-pane label="部门">
						<el-tree-v2
							ref="tree2"
							:check-strictly="true"
							:data="data"
							:height="208"
							node-key="orgNo"
							:props="treeProps"
							:default-expanded-keys="orgParentNoArray"
							lazy
							@nodeClick="orgClick"/>
					</el-tab-pane>
				</el-tabs>
			</div>
			<div>
				<el-tabs class="demo-tabs">
					<el-tab-pane label="人员">
<!--						<el-input-->
<!--							v-model="input"-->
<!--							:prefix-icon="Search"-->
<!--							class="w-50 m-2 user-main"-->
<!--							placeholder="搜索"-->
<!--						/>-->
						<div class="sketch_content">
							<div v-for="user_org in orgUserList"
								 :key="user_org.id"
								 class="user-avatar"
								 @click="orgUserClick(user_org)">
								<div>
									<el-avatar :size="28">{{ user_org.cn.substring(user_org.cn.length - 2) }}</el-avatar>
									{{ user_org.cn }}
								</div>
								<el-icon v-if="user_org.select" color="#67C23A"><Select/></el-icon>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
			<div>
				<div>已选择( {{ selectList.length }} )</div>
				<div class="select-user-list">
					<div v-for="user in selectList"
						 :key="user.id"
						 class="user-avatar select-user-avatar"
					>
						<div>
							<el-avatar :size="28">{{ user.cn.substring(user.cn.length - 2) }}</el-avatar>
							{{ user.cn }}
						</div>
						<el-icon color="#F56C6C" @click="orgUserClick(user)">
							<Delete/>
						</el-icon>
					</div>
				</div>
			</div>
		</div>
		<template #footer>
			<el-button text @click="onClean">取消</el-button>
			<el-button type="primary" @click="onSubmit(true)">确定</el-button>
		</template>
	</el-dialog>
</template>


<style lang="scss" scoped>
.add-user-icon {
	border: 1px dashed;
	border-radius: 100%;
	width: 32px;
	height: 32px;
	text-align: center;
	line-height: 37px;
	color: #c1c2c3;

	&:hover {
		color: #409eff;
		cursor: pointer;
	}
}

.popover-body {
	display: flex;
	height: 500px;

	> div {
		flex: 1;
		margin-right: 12px;
		padding: 0 12px;

		&:not(:last-child) {
			margin: 0;
			border-right: 1px solid #eee;
		}

		&:last-child {
			> div:first-child {
				margin-bottom: 24px;
				margin-top: 6px;
			}
		}
	}

	.user-avatar {
		padding: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		&:hover {
			cursor: pointer;
			background: aliceblue;
		}

		.el-avatar {
			margin-right: 10px;
			font-size: 12px;
		}
	}

	.select-user-avatar {
		&:hover {
			.el-icon {
				display: unset;
			}
		}

		.el-icon {
			display: none;
		}
	}

	.user-main {
		margin-bottom: 15px;
	}

	.select-user-list {
		> div {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
		}
	}

	.sketch_content {
		// 必须有高度 overflow 为自动
		overflow: auto;
		height: 484px;
		border-top: 1px solid #eff1f4;
		border-bottom: 1px solid #eff1f4;
		padding: 0px 30px 11px 27px;
	}

	// 滚动条的样式,宽高分别对应横竖滚动条的尺寸
	.sketch_content::-webkit-scrollbar {
		width: 3px;
	}

	// 滚动条里面默认的小方块,自定义样式
	.sketch_content::-webkit-scrollbar-thumb {
		background: #8798AF;
		border-radius: 2px;
	}

	// 滚动条里面的轨道
	.sketch_content::-webkit-scrollbar-track {
		background: transparent;
	}
}
</style>
